<template>
  <div class="box">
      <header class="header">
        <ul>
          <li class="left">
            <van-icon name="arrow-left" color="#333" size="20" @click="$router.back()"/>
          </li>
          <li class="center">
            <div class="search" @click="$router.push('/search')">{{ text }}</div>
          </li>
          <li class="right">
          </li>
        </ul>
      </header>
      <section class="content">
        <van-sticky>
          <van-dropdown-menu >
            <van-dropdown-item v-model="priceValue" :options="priceOption" @change="priceSort"/>
            <van-dropdown-item v-model="salesValue" :options="salesOption" @change="salesSort"/>
            <van-dropdown-item title="筛选" ref="item" class="myitem" position="right">
              <div class="priceBox">
                <p>价格区间</p>
                <van-field v-model="min" placeholder="最低价" />
                <div>-</div>
                <van-field v-model="max" placeholder="最高价" />
              </div>
              <div style="padding: 5px 16px;">
                <van-button type="danger" block round @click="onConfirm">确认</van-button>
              </div>
            </van-dropdown-item>
          </van-dropdown-menu>
        </van-sticky>
        <Prolist :prolist="prolist"></Prolist>
      </section>
    </div>
</template>

<script>
import Vue from 'vue'
import { Icon, DropdownMenu, DropdownItem, Sticky, Field, Button } from 'vant'
import { getCategoryBrandLists } from '@/api'
import Prolist from './Prolist'

Vue.use(Icon)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Sticky)
Vue.use(Field)
Vue.use(Button)

export default {
  components: {
    Prolist
  },
  data () {
    return {
      prolist: [],
      list: [], // 深拷贝的 prolist
      text: '',
      min: '',
      max: '',
      priceValue: 0,
      salesValue: 0,
      switch1: false,
      switch2: false,
      priceOption: [
        { text: '综合排序', value: 0 },
        { text: '价格从低到高', value: 1 },
        { text: '价格从高到低', value: 2 }
      ],
      salesOption: [
        { text: '销量排序', value: 0 },
        { text: '销量升序', value: 1 },
        { text: '销量降序', value: 2 }
      ]
    }
  },
  mounted () {
    this.getCategoryBrandLists()
  },
  methods: {
    onConfirm () {
      this.prolist = this.list
      let arr = []
      if (this.max === '') {
        arr = this.prolist.filter(item => {
          return item.price >= this.min * 1
        })
      } else {
        arr = this.prolist.filter(item => {
          return item.price >= this.min * 1 && item.price <= this.max * 1
        })
      }
      this.prolist = arr
      this.$refs.item.toggle()
    },
    salesSort (key) {
      // console.log(key)
      switch (key) {
        case 0:
          // console.log('默认排序')
          this.prolist = this.list
          break
        case 1:
          // console.log('销量升序')
          this.prolist.sort((a, b) => {
            return a.sales - b.sales
          })
          break
        case 2:
          // console.log('销量降序')
          this.prolist.sort((a, b) => {
            return b.sales - a.sales
          })
          break
      }
    },
    priceSort (key) {
      // console.log(key)
      switch (key) {
        case 0:
          // console.log('默认价格排序')
          this.prolist = this.list
          break
        case 1:
          // console.log('价格升序')
          this.prolist.sort((a, b) => {
            return a.price - b.price
          })
          break
        case 2:
          // console.log('价格降序')
          this.prolist.sort((a, b) => {
            return b.price - a.price
          })
          break
      }
    },
    getCategoryBrandLists () {
      const { category, brand } = this.$route.query
      this.text = brand
      getCategoryBrandLists({
        category, brand
      }).then(res => {
        this.prolist = res.data.data
        // console.log(this.prolist)
        this.list = JSON.parse(JSON.stringify(this.prolist))
        // console.log(this.list)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  background: #fff;
  border-bottom: 0.01rem solid #ddd;
  ul {
    height: 100%;
    display: flex;
    li {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      &:nth-child(1), &:nth-child(3) {
        color: #fff;
      }
      &:nth-child(2) {
        flex: 1;
        .search {
          width: 80%;
          height: 0.3rem;
          background: #efefef;
          color: #666;
          padding-left: 12px;
          line-height: 0.3rem;
          border-radius: 20px;
        }
      }
    }
  }
}
.myitem {
  .priceBox {
    padding: 10px 15px;
    display: flex;
    p {
      line-height: 44px;
      font-size: 14px;
    }
    div {
      line-height: 44px;
    }
    .van-field {
      flex: 1;
      input {
        text-indent: 12px;
      }
    }
    .van-cell van-field {
      border-bottom: none;
    }
    .van-dropdown-item {
    position: fixed;
    right: 0;
    left: 15%;
    z-index: 10;
    overflow: hidden;
    }
    .van-popup--top {
      top: 0;
      bottom: 0;
      left: 15%;
      width: 85%;
    }
  }
}
</style>
